<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" size="mini">
        <el-form-item label="GUID">
            <el-input disabled :value="node.uuid"></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceId">
            <el-select v-model="ruleForm.deviceId" placeholder="请选择设备" :style="{width: '100%'}">
                <el-option v-for="(item, index) in deviceList" :disabled="disable(item)" :key="index" :label="item.nodeName" :value="item.nodeId"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="text-align: right;">
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        </el-form-item>
        <p v-show="false">{{deviceName}}</p>
    </el-form>
</template>
<script>
// import NodeApi from "@/api/route/NodeApi";
export default {
    props: {
        selectedDeviceList: {
            type: Set,
            default() {
                return new Set()
            }
        }
    },
    computed: {
        deviceName () {
            let name = '';
            this.deviceList.forEach(ele => {
                if (ele.nodeId == this.ruleForm.deviceId) {
                    name = ele.nodeName;
                }
            })
            return name;
        },
        disable() {
            return (item) => {
                return this.selectedDeviceList.has(item.nodeId)
            }
        }
    },
    data () {
        return {
            node: {},
            ruleForm: {
                deviceId: '',
            },
            rules: {
                deviceId: [
                    { required: true, message: '请选择设备', trigger: 'change'},
                ],
            },
            deviceList: [],
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$emit('changeNode', {
                        uuid: this.node.uuid,
                        params: {
                            deviceId: this.ruleForm.deviceId,
                            deviceName: this.deviceName
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        init(data, item) {
            this.node = item;
            console.log('init', item)
            this.ruleForm.deviceId = item.deviceId || '';
            // data.nodeList.filter((node) => {
            //     if (node.id === item.id) {
            //         this.node = node;
            //     }
            // })
        },
    },
    mounted () {
        this.$bus.$on('getDeviceList', (obj) => {
            if (obj) {
                // NodeApi.forCluster(obj).then(rsp => {
                //     this.deviceList = [...rsp];
                // }).catch(err => {
                //     this.deviceList = [];
                //     this.ruleForm.deviceId = '';
                // })
            } else {
                this.deviceList = [];
                this.ruleForm.deviceId = '';
            }
        })
    },
    beforeDestroy () {
        this.$bus.$off('getDeviceList');
    }
}
</script>
<style lang="scss" scoped>

</style>
